<template>
  <div id="InformationList">
    <van-tabs v-model="actionKey">
      <!--      系统消息-->
      <van-tab title="系统消息">
        <!--        @mousedown="startTimer"-->
        <!--        @mouseup="stopTimer"-->
        <!--        @mouseleave="stopTimer"-->
        <!--        <div v-if="showMessage" class="message">松开鼠标，信息显示在这里！</div>-->
        <div class="InformationList1" v-for="item in deditSums" :key=item.index>
          <img src="@/assets/提醒icon.png" style="width: 50px; height: 50px;margin-top: 10px">
          <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">违约金支付提醒</span>
          <span
              style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
             {{ formattedDate(new Date()) }}</span>
          <span class="InformationList11">违约金说明，违约金说明，违约金说明，违约金说明</span>
        </div>
        <div class="InformationList1" v-for="item in paymentSums" :key=item.index>
          <img src="@/assets/mail.png" style="width: 50px; height: 50px;margin-top: 10px">
          <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">支付通知</span>
          <span
              style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
              {{ formattedDate(new Date()) }}</span>
          <span class="InformationList11">订单自动支付通知，订单自动支付通知，订单支付通知，订单支付通知</span>
        </div>
        <div class="InformationList1" v-for="item in safelySums" :key=item.index>
          <img src="../../assets/安全中心.png" style="width: 50px; height: 50px;margin-top: 10px">
          <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">乘车安全提醒</span>
          <span
              style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
            {{ formattedDate(new Date()) }}</span>
          <span class="InformationList11">乘车安全提醒，乘车安全提醒，乘车安全提醒，乘车安全提醒</span>
        </div>
      </van-tab>
      <!--      订单消息-->
      <van-tab title="订单消息">
        <div class="InformationList2" v-for="(item,index) in messageList" :key="index"
             @click="toChat(item.orderInformation.driverId)">
          <img :src="item.driverAttribute.driverImgurl"
               style="width: 50px; height: 50px;border-radius: 50%;margin-top: 10px">
          <span
              style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
              {{ formattedOrderTime(item.orderTime.orderTime) }}</span>
          <span
              style="position: absolute;
                float: left;
                margin-top: 10px;
                margin-left: 18px">{{ item.driverAttribute.driverName }}</span>
          <span class="InformationList22" v-if="item.chatMessage!=null">
            {{ item.chatMessage.message }}</span>
        </div>
      </van-tab>

      <!--      问题反馈-->
      <van-tab title="问题反馈">
        <div class="InformationList6">
          <div class="InformationList66" v-for="(item,index) in complaintList" :key="index">
            <div class="InformationList666">
              <van-icon name="underway" class="InformationList6661"/>
              <span>{{
                  item.orderTime.dayOfTheWeek
                }} &emsp;完成时间:&ensp;{{ formattedTime(item.orderTime.destinationTime) }}</span>
              <div class="InformationList6666">
                <span v-if="item.orderComplaint.complaintStatus==1" style="font-size: 20px;color: red">处理中</span>
                <span v-if="item.orderComplaint.complaintStatus==2" style="font-size: 20px;color: #969696">已处理</span>
                <van-icon name="arrow"/>
              </div>
            </div>
            <div class="InformationList3">
              <div class="InformationList33"></div>
              <span>{{ item.orderInformation.startingPointAddress }}</span>
            </div>
            <div class="InformationList4">
              <div class="InformationList44"></div>
              <span>{{ item.orderInformation.destinationAddress }}</span>
            </div>
            <div class="InformationList5">
              <div class="InformationList55">
                <van-button type="default"
                            @click="toFeedbackDetail(item.orderInformation.orderId,item.orderInformation.driverId)">查看
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <BottomPanel/>
  </div>
</template>
<script>
import BottomPanel from "@/views/bottomPanel.vue";
import {complaintList, getOrderStatusCount, messageList} from "@/api/information/informationList"

export default {
  components: {BottomPanel},
  data() {
    return {
      actionKey: 0,
      // timer: null,
      // showMessage: false
      //投诉订单列表
      complaintList: [],
      userId: window.localStorage.getItem('userId'),
      //违约金数量
      deditSum: 0,
      deditSums: null,
      //支付通知数量
      paymentSum: 0,
      paymentSums: null,
      //乘车安全
      safelySum: 0,
      safelySums: null,
      // 使用 new Date() 创建的日期对象
      date: new Date(), // 例如，当前日期
      //信息
      messageList: [],
    }
  },
  created() {
    this.activeKey = 0
    this.findComplaintList()
    this.getOrderStatusCount()
    this.findMessage()
  },
  methods: {
    formattedTime(time) {
      const date = new Date(time); // 将字符串转换为 Date 对象
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    formattedDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // getMonth() 返回的是 0 到 11 的值，所以需要加 1
      const day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    formattedOrderTime(dateTime) {
      const date = new Date(dateTime);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // getMonth() 返回的是 0 到 11 的值，所以需要加 1
      const day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    //查找消息
    findMessage() {
      messageList(this.userId).then(res => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].driverAttribute != null) {
            this.messageList.push(res.data[i])
          }
        }
      })
    },
    // startTimer() {
    //   this.timer = setTimeout(() => {
    //     this.showMessage = true;
    //   }, 500); // 设置长按时间阈值
    // },
    // stopTimer() {
    //   clearTimeout(this.timer);
    //   if (this.showMessage) {
    //     // 可以在这里处理长按后的逻辑
    //   }
    //   this.showMessage = false; // 隐藏消息
    // },
    toFeedbackDetail(orderId, driverId) {
      this.$router.push({path: '/feedbackDetail', query: {orderId: orderId, driverId: driverId}})
    },
    //查找投诉订单信息
    findComplaintList() {
      complaintList(this.userId).then(res => {
        this.complaintList = res.data
      })
    },
    //查找订单状态数量
    getOrderStatusCount() {
      getOrderStatusCount(this.userId).then(res => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].status == 6) {
            this.deditSum += res.data[i].count
          } else if (res.data[i].status == 2) {
            this.safelySum += res.data[i].count
          } else if (res.data[i].status == 7) {
            this.paymentSum += res.data[i].count
          }
        }
        //生成数组,例如 数字4 生成[1,2,3,4]
        this.deditSums = Array.from({length: this.deditSum}, (_, index) => index + 1)
        this.paymentSums = Array.from({length: this.paymentSum}, (_, index) => index + 1)
        this.safelySums = Array.from({length: this.safelySum}, (_, index) => index + 1)
      })
    },
    //跳转到消息页面
    toChat(driverId) {
      this.$router.push({path: '/chat', query: {driverId: driverId}})
    }
  },


}

</script>
<style>
#InformationList {
  width: 100%;
  height: 95vh;
  overflow: auto; /* 开启滚动条 */
  background: #F7F7F7;
}

.InformationList1 {
  width: 100%;
  height: 70px;
  background: white;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.InformationList11 {
  position: absolute;
  float: left;
  width: 329px;
  margin-top: 40px;
  margin-left: 16px;
  font-size: 15px;
  color: #9f9498;
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

.InformationList2 {
  width: 100%;
  height: 70px;
  background: white;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}

.InformationList22 {
  position: absolute;
  float: left;
  width: 329px;
  margin-top: 40px;
  margin-left: 16px;
  font-size: 15px;
  color: #9f9498;
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号显示超出的内容 */
  white-space: nowrap;
}


.InformationList6 {
  width: 100%;
  height: 90vh;
  overflow: auto; /* 开启滚动条 */
  background: #F7F7F7;
}

.InformationList66 {
  width: 98%;
  height: 170px;
  margin-top: 15px;
  background: white;
  margin-left: 5px;
}

.InformationList666 {
  width: 100%;
  height: 30px;
}

.InformationList6661 {
  display: inline-block;
  margin-top: 10px;
  margin-left: 20px;
  color: #919191;
}

.InformationList666 span {
  display: inline-block;
  margin-left: 20px;
}

.InformationList6666 {
  float: right;
  display: inline-block;
  margin-top: 5px;
  margin-right: 20px;
  font-size: 20px;
}

.InformationList3 {
  width: 100%;
  height: 40px;
}

.InformationList33 {
  width: 10px;
  height: 10px;
  background: #009587;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
  margin-left: 25px;
  float: left;
}

.InformationList3 span {
  display: inline-block;
  margin-left: 20px;
  width: 80%;
  margin-top: 10px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.InformationList4 {
  width: 100%;
  height: 40px;
}

.InformationList44 {
  width: 10px;
  height: 10px;
  background: #F0A439;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
  margin-left: 25px;
}

.InformationList4 span {
  display: inline-block;
  margin-left: 20px;
}

.InformationList5 {
  width: 100%;
  height: 60px;
}

.InformationList55 {
  width: 100px;
  height: 50px;
  display: inline-block;
  float: right;
  margin-right: 40px;
  margin-top: 10px;
}

.InformationList5 button {
  width: 100px;
  height: 30px;
  margin-left: 20px;
  border-radius: 20px;
  border: 1px solid #919191;
}
</style>